<script setup lang="ts">
import { computed, ref } from 'vue';

import { MdiDoubleDown, MdiDoubleUp } from '@vben/icons';

import dayjs from 'dayjs';

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
  currentOrderId: {
    type: String,
    default: '',
  },
  form: {
    type: Object,
    default: () => ({}),
  },
  orderData: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(['click', 'switchStatus']);

// 子订单列表
const subOrderList = computed(() => {
  const data = props.orderData || {};
  let list;
  const arr = [
    {
      orderNo: data.orderNo,
      time: data.cancelTime,
      text: '取消',
      status: '已取消',
      type: 'cancel',
    },
    {
      orderNo: data.orderNo,
      time: data.applyEarlyCheckoutConfirmTime, // 最新修改确认时间
      text: '修改',
      status: '',
      type: 'modify',
    },
    {
      orderNo: data.orderNo,
      time: data.createdTime,
      text: '无效',
      status: '',
      type: 'default',
    },
  ];
  if (data.orderType === 4) {
    // 如果没有修改时间，则把arr数组中的角标1删除
    list = data.orderChangeLog?.newCheckOutDate
      ? arr
      : arr.filter((_, index) => index !== 1);
  } else if (data.orderType === 2) {
    list = arr.filter((_, index) => index !== 0);
  }
  return list;
});

const subOrderTime = (date: string) => {
  if (!date) {
    return '';
  }
  try {
    return dayjs(date).format('MM-DD HH:mm');
  } catch (error) {
    console.error(error);
    return '';
  }
};

const isSelected = computed(() => {
  return props.data.orderNo === props.currentOrderId;
});

// 根据订单状态显示不同的颜色
const statusColor = computed(() => {
  switch (props.data.orderType) {
    case 1: {
      return 'bg-primary'; // 新订
    }
    case 2: {
      return 'bg-orange-300'; // 修改
    }
    case 3: {
      return 'bg-blue-300'; // 续住
    }
    case 4: {
      return 'bg-red-400'; // 取消
    }
    default: {
      return 'bg-primary';
    }
  }
});

const statusText = (type: number) => {
  switch (type) {
    case 1: {
      return '新订';
    }
    case 2: {
      return '修改';
    }
    case 3: {
      return '续住';
    }
    case 4: {
      return '取消';
    }
    default: {
      return '';
    }
  }
};

const orderStatusText = (type: number) => {
  switch (type) {
    case 2: {
      return '待接单';
    }
    case 3: {
      return '已接单';
    }
    case 4: {
      return '已入住';
    }
    case 5: {
      return '已完成';
    }
    case 6: {
      return '已取消';
    }
    case 7: {
      return '过时取消';
    }
    case 31: {
      return '已拒绝';
    }
    default: {
      return '';
    }
  }
};

// 查看订单详情
const goDetail = () => {
  emit('click', props.data.orderNo);
};

// 选中的底部列表角标
const selectedIndex = ref(0);
// 是否展开
const isExpand = ref(true);

// 切换详情
const handleDetail = (index: number, type: string) => {
  selectedIndex.value = index;
  // 到时候可能不单要抛出订单id还有状态值或者对应的key去访问相应状态的详情
  emit('switchStatus', type);
};

// 展开收起列表
const handleExpand = (index: number, type: string) => {
  if (index === 0) {
    isExpand.value = !isExpand.value;
  } else {
    handleDetail(index, type);
  }
};
</script>

<template>
  <div>
    <div
      :class="[
        isSelected ? 'border-primary' : 'border-transparent',
        [6, 7].includes(data.orderStatus) || data.orderStatus === 31
          ? 'grayTheme'
          : '',
      ]"
      class="card-box mt-3 cursor-pointer rounded-sm px-3"
      @click="goDetail"
    >
      <div
        class="flex items-center justify-between border-b border-dashed py-3"
      >
        <div class="flex items-center">
          <span
            v-if="data.orderStatus === 31"
            class="mr-2 rounded-sm bg-red-400 px-1.5 py-0.5 text-xs text-white"
          >
            拒绝
          </span>
          <span
            v-else-if="data.orderType"
            :class="[statusColor]"
            class="mr-2 rounded-sm px-1.5 py-0.5 text-xs text-white"
          >
            {{ statusText(data.orderType) }}
          </span>
          <p class="text text-base">{{ data.orderNo }}</p>
        </div>
        <div class="flex items-center">
          <p class="opacity-70">
            {{
              data.createTime
                ? dayjs(data.createTime).format('MM/DD HH:mm')
                : ''
            }}
          </p>
          <p class="text ml-3">
            {{
              form.orderTalStatus === 1 ||
              ([1, 4].includes(data.applyStatus) &&
                [3, 4, 5].includes(data.orderStatus))
                ? '待处理'
                : orderStatusText(data.orderStatus)
            }}
          </p>
        </div>
      </div>
      <div class="py-1.5">
        <div class="flex items-center justify-between py-1">
          <p class="text">
            <span class="font-bold">{{ data.roomCount || 0 }} 间</span>
            <span class="mx-1 opacity-70"> |</span>
            {{ data.nameZh }}
          </p>
        </div>
        <div class="flex items-center justify-between py-1">
          <p class="text">
            <span class="font-bold">{{ data.nights || 0 }} 晚</span>
            <span class="mx-1 opacity-70"> |</span>
            {{
              data.checkInDate
                ? dayjs(data.checkInDate).format('YYYY/MM/DD')
                : ''
            }}
            -
            {{
              data.checkOutDate
                ? dayjs(data.checkOutDate).format('YYYY/MM/DD')
                : ''
            }}
          </p>
          <p class="text">{{ data.contactName }}</p>
        </div>
      </div>
    </div>
    <!-- 取消订单或者修改订单都需显示 -->
    <div
      v-if="isSelected && [2, 4].includes(data.orderType)"
      class="listBot rounded-sm bg-blue-100/20 py-2"
    >
      <div v-for="(item, index) in subOrderList" :key="index">
        <div
          v-if="index === 0 || (index !== 0 && isExpand)"
          :class="[index === selectedIndex ? 'bg-blue-300/40' : '']"
          class="flex cursor-pointer select-none items-center justify-between py-[2px] pl-2.5 pr-3 hover:bg-blue-300/40"
          @click="handleDetail(index, item.type)"
        >
          <div
            :class="[index !== 0 ? 'opacity-0' : '']"
            class="bg-primary/20 mr-3 flex h-3.5 w-3.5 items-center justify-center rounded-full p-[3px]"
          >
            <span class="bg-primary flex h-full w-full rounded-full"></span>
          </div>
          <p :class="[index !== 0 ? 'opacity-0' : '']" class="text">
            {{ item.orderNo || '' }}
          </p>
          <div
            :class="[index !== 0 ? 'opacity-0' : '']"
            class="mx-1 flex h-[16px] min-w-[30px] items-center justify-between bg-white px-[3px] text-xs text-gray-400"
            @click.stop="handleExpand(index, item.type)"
          >
            <span>{{ subOrderList?.length || '' }}</span>
            <MdiDoubleUp v-if="isExpand" />
            <MdiDoubleDown v-else />
          </div>
          <p class="text flex-auto">
            <!-- 到时候使用子订单实际的订单状态 -->
            {{ item.text }} {{ subOrderTime(item.time) }}
          </p>
          <p v-if="index === 0" class="text">
            {{ item.status }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.grayTheme .text {
  color: #999; //hsl(var(--card-foreground) / 50%);
}

.listBot {
  box-shadow: 0 0 8px 0 rgb(0 0 0 / 10%);
}

.listBot .text {
  color: hsl(var(--card-foreground) / 70%);
}
</style>
